<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>
    <div>
        <img id="a1"
            src="https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/33428/39/16450/106681/6311cad7Ef9b3d856/f10720b7f8f38937.jpg!cr_1053x420_4_0!q70.jpg"
            alt="">
        <img id="a2"
            src="https://m15.360buyimg.com/mobilecms/jfs/t1/3230/40/20384/44107/62daf2d9E5c5e0e55/03ab360c40ddc266.jpg!cr_1125x449_0_166!q70.jpg"
            alt="">
        <img id="a3"
            src="https://m15.360buyimg.com/mobilecms/jfs/t1/110775/22/28940/94917/62e5bc6dE569b2244/5d14fc9f06d87341.jpg!cr_1125x449_0_166!q70.jpg"
            alt="">
    </div>
    <script>
        var imgs = document.images;
        var div = document.querySelector("div");
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].ondragstart = function (e) {
                // e.dataTransfer是一个对象 是拖拽事件提供的,在所有拖拽事件中公有的对象
                // setData是向dataTransfer对象添加数据
                // 参数1是属性名
                // 参数2是属性值
                e.dataTransfer.setData("ele", e.target.id);//将被拖拽的标签的id存入dataTransfer对象
                // e.dataTransfer.setData("ele",e.target.id); //将被拖拽的标签的id存入dataTransfer对象

            }
            imgs[i].ondrop = function (e) {
                // 设置阻止事件的传播和默认事件 能解决图片在新窗口打开的问题
                e.preventDefault();
                e.stopPropagation();
                console.log(e.target);//结束时,鼠标所在的标签
                // getData() 获取dataTransfer中的数据
                // 参数是属性名
                var ai = e.dataTransfer.getData("ele");//获取被拖拽标签的id
                console.log(ai);//根据id获取被拖拽的标签
                var img = document.getElementById(ai);
                // 设置在div内将获取到的img插入在e.target这个子标签之前
                div.insertBefore(img, e.target)
            }
        }
    </script>
</body>

</html>